<template>
  <div style="height: 500px">
    <FancyList :request="onRequest" refresh>
      <template #default="{ imageUrl, name }">
        <img width="100" :src="imageUrl" />
        <p>{{ name }}</p>
      </template>
    </FancyList>
  </div>
</template>

<script lang="ts" setup>
import FancyList, { type IParams } from '@/components/fancy-list/index.vue'
import axios from 'axios'

const onRequest = async (params: IParams) => {
  // 调用接口
  const response = await axios.get('http://localhost:3000/phones', {
    params: {
      _page: params.pageNum,
      _limit: params.pageSize
    }
  })
  console.log('response', response)

  return {
    list: response.data,
    total: response.headers['x-total-count']
  }
}
</script>
